<template>
  <header>
    <img class="banner" v-if="show" src="~/assets/copycats-drib.gif" title="点击缩小" @click="show = !show">
    <div class="circular-box" v-else @click="show = !show">
      <img class="banner1" src="~/assets/copycats-drib.gif"  title="点击放大">
    </div>
    <!-- <h1>Beautifully simple click-to-copy CSS effects</h1> -->
    <!-- <p>A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by CSS with minimal markup. Completely open source and MIT licensed.</p> -->
  </header>
</template>
<script>
export default {
  data() {
    return {
      show:true
    }
  },
}
</script>

<style lang="scss">
header {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  text-align: center;
  padding: 0 1.5em;
  margin: 0 auto 2em auto;
}


h1 {
  font-size: 1.8em;
  font-weight: 600;
  margin-bottom: 0.5em;
}

p {
  font-size: 1.2em;
  font-weight: 300;
}

  .banner {
    height: 500px;
    border-radius: 10px;
  }
  .circular-box {
    position: absolute;
    right: 2em;
    top: 2em;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
  }
// Responsive styles

@media only screen and (min-width: 320px)  and (max-width: 639px){
    header {
      max-width: 640px;
      padding: 0 4em;
    }
    .banner {
      height: 200px;
      border-radius: 10px;
    }
    .circular-box {
      position: absolute;
      right: 2em;
      top: 2em;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
}

@media only screen and (min-width: 640px) and (max-width: 959px){
    header {
    max-width: 768px;
    padding: 0 6em;
  }

  h1 {
    font-size: 2em;
    margin-bottom: 1em;
  }
  .banner {
    height: 300px;
    border-radius: 10px;
  }
  .circular-box {
    position: absolute;
    right: 2em;
    top: 2em;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
}

@media only screen and (min-width: 960px) and (max-width: 1241px){
    header {
      max-width: 1024px;
      padding: 0 10em;
    }
    .banner {
      height: 500px;
      border-radius: 10px;
    }
    .circular-box {
    position: absolute;
    right: 2em;
    top: 2em;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
  }
}

@media only screen and (min-width: 1242px){
    header {
    max-width: 1280px;
    padding: 0 12em;
  }
  .banner {
    height: 500px;
    border-radius: 10px;
  }
}

</style>
